import React, {useEffect, useState} from "react";
import { Modal } from "antd";

export default function(props: any) {
    console.log("successModal", props)
    const { showSuccessModal, setShowSuccessModal, setQrUrl, onHideForm } = props;
    const [showModal, setShowModal] = useState(false);
    useEffect( () => {
        setShowModal(showSuccessModal);
    }, [showSuccessModal])
    return (
        <Modal 
            className="success-modal"
            open={showModal}
            okButtonProps={{}}
            cancelButtonProps={{}}
            onCancel={() => {
                setShowSuccessModal(false)
                setQrUrl("")
                onHideForm && onHideForm()
            }}
        >
            <div className="success-modal-wrapper">
                <div className="success-text">
                    <img className="icon-success" src={require("@/assets/imgs/icon-success.png")} alt="" />
                    <p className="submit-success">提交成功</p>
                </div>
                <p className="success-desc">已为您分配专属阿里巴巴跨境顾问，请微信扫码添加顾问企业微信</p>
                <div className="success-content">
                    <div className="qrcode-wrapper">
                        <img className="qr-url" src={props.qrUrl} alt="" />
                    </div>
                    <div className="qrcode-text">
                        <ul>
                            <li>免费的1v1专属顾问</li>
                            <li>大量行业资料免费领取</li>
                            <li>实时查询动态的外贸工具</li>
                        </ul>
                        <p className="qrcode-desc">
                            <img src={require("@/assets/imgs/icon-hand.png")} alt="" />
                            <span>立即扫码添加，免费领取吧~</span>
                        </p>
                    </div>
                </div>
                <div className="modal-logo">
                    <img src={require("@/assets/imgs/icon-logo.png")} alt="" />
                </div>
            </div>
        </Modal>
    )
}